import * as React from 'react';
import { get } from 'lodash';

import Test from '../Test';
import EditKnowledge from '../common/EditKnowledge';
import ContentEditable from 'components/common/ContentEditable';

export default class Tpl3 extends React.Component {
  renderContent = (testProps: any, testOwnProps: any) => {
    const { handleUpdateKnowledge } = testOwnProps;
    const { lessonId, testProfile, updateTest, fetchTestDetail } = testProps;
    const { content } = testProfile;
    const knowledgeId = get(content, 'knowledgeId', 0);

    return (
      <div>
        <EditKnowledge
          showImage={true}
          lessonId={lessonId}
          knowledgeId={knowledgeId}
          handleUpdateKnowledge={handleUpdateKnowledge}
        />
        {this.renderAnswer(testProfile, updateTest, fetchTestDetail)}
        {this.renderWrongOptions(testProfile, updateTest, fetchTestDetail)}
      </div>
    );
  };

  renderAnswer(testProfile: any, updateTest: any, fetchTestDetail: any) {
    const answer = get(testProfile, 'content.answer', []);
    return (
      <div className="text-center test-parser-sub-title">
        <h4 className="text-left test-parser-sub-title">答案</h4>
        <ContentEditable
          tagName="select"
          tip="填写音节答案"
          maxLen={11}
          onChange={(answer: any[]) => {
            let { content } = testProfile;
            content = { ...content, answer };
            updateTest({ content }).then(fetchTestDetail);
          }}>
          {answer}
        </ContentEditable>
      </div>
    );
  }

  renderWrongOptions(testProfile: any, updateTest: any, fetchTestDetail: any) {
    const options = get(testProfile, 'content.options', []);
    return (
      <div className="text-center test-parser-sub-title">
        <h4 className="text-left test-parser-sub-title">音节混淆项</h4>
        <ContentEditable
          tagName="select"
          tip="填写单词音节混淆项，以逗号(,)分隔"
          maxLen={11}
          onChange={(options: any[]) => {
            console.log('options: ', options);
            let { content } = testProfile;
            content = { ...content, options };
            updateTest({ content }).then(fetchTestDetail);
          }}>
          {options}
        </ContentEditable>
      </div>
    );
  }

  render() {
    return <Test {...this.props}>{this.renderContent}</Test>;
  }
}
